import { ReactNode, useEffect, useState } from 'react';
import './App.scss'


import { RouteConfig, routers } from "./router";
import { BrowserRouter, Route, Routes, } from 'react-router-dom';
import AuthRoute from './router/AuthRouter';
import useLayoutStore, { lazyLoad } from './store/layoutStore';
import { shallow } from 'zustand/shallow'

function App() {
  const { myRouters, returnRouter, getMenus } = useLayoutStore((state) => ({ myRouters: state.myRouters, getMenus: state.getMenus, returnRouter: state.returnRouter }), shallow)
  const [rout, setRout] = useState(routers)
  useEffect(() => {
    // if (!myRouters.length) {
    //   getMenus()
    // }
  }, [myRouters])

  // 处理我们的routers
  const RouteAuthFun = (
    (routeList: RouteConfig[]) => {
      return routeList.map(
        (item: {
          path: string;
          auth: boolean;
          element: React.ReactNode;
          children?: any;
          redirect?: string
        }) => {
          return (
            <Route
              path={item.path}
              element={
                <AuthRoute auth={item.auth} key={item.path}>
                  {item.element}
                </AuthRoute>
              }
              key={item.path}
            >
              {/* 递归调用，因为可能存在多级的路由 */}
              {item?.children && RouteAuthFun(item.children)}
            </Route>
          );
        }
      );
    }
  );
  return <BrowserRouter >
    <Routes>{RouteAuthFun(routers)}</Routes>

  </BrowserRouter >;
}

export default App

